<template lang="pug">
  section
    //- van-nav-bar(
    //-   title="首页"
    //-   :fixed="true"
    //-   )
    header.header
      .user
        .avatar(:style='{backgroundImage: `url(${headImageUrl})`}' @click="asideShow = true")
        .user-info
          span.username {{user && user.userWx.nickname}}
          .credit
            |积分{{points}}
            van-icon(name="question2" @click="$router.push('/creditRule')")
    navbar
      navbar-item(icon="pending-orders" name="我的订单" to="/order")
      navbar-item(icon="share" name="我的推荐" to="/recommend")
    
    van-notice-bar(
      background="#fff"
      text="新品上架"
      left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
      )
    //- main
    van-list(
      v-model="isLoading"
      :finished="finished"
      @load="onLoad"
      :offset="offset"
      )
      card(
        v-bind="cardData(commodity)" 
        v-for="commodity in commoditys" 
        :key="commodity.id" 
        @click="$router.push('/detail/' + commodity.id)")
        card-right(:commodity="commodity")
      //- van-card(
      //-   :num="commodity.stock"
      //-   :price="commodity.price"
      //-   :title="commodity.name"
      //-   :desc="commodity.subtitle"  
      //-   :thumb="commodity.mainImage",
      //-   v-for="commodity in commoditys"
      //-   :key="commodity.id"
      //-   :thumb-link="'/detail/' + commodity.id"
      //-   )
      //-   div(slot="footer")
      //-     van-button(size="small" @click="$router.push('/detail/' + commodity.id)") 商品详情
      //-     van-button(size="small" @click="toBuy(commodity)") 立即购买

    van-tabbar(v-model="active")
      van-tabbar-item(icon="shop" to="/store") 我的代言
      van-tabbar-item(icon="records" to="/credit") 我的积分
      van-tabbar-item(icon="cart" to="/shoppingCart" :info="cartNum || ''") 购物车
      van-tabbar-item(icon="gold-coin" to="/withdraw") 我要提现

    van-popup(v-model="asideShow" position="left")
      van-cell-group.aside
        .aside-title
          .avatar(:style='{backgroundImage: `url(${headImageUrl})`}')
          .username {{user && user.userWx.nickname}}
        van-cell(title="个人资料" value="" is-link @click="$toast('敬请期待')")
          van-icon(name="mdi-account-settings mdi mdi-24px" slot="icon")
        
        van-cell(title="店铺名片" value="" is-link @click="$router.push('/businessCard')")
          van-icon(name="mdi-account-card-details mdi mdi-24px" slot="icon")
        van-cell(title="设置" value="" is-link @click="$toast('敬请期待')")
          van-icon(name="mdi-settings mdi mdi-24px" slot="icon")
    
</template>

<script>
import card from '~/components/card'
import navbar from '~/components/navbar'
import navbarItem from '~/components/navbar-item'
import cardRight from '~/components/card-right'
import axios from 'axios'
import { pageSize, offset } from '~/config/search'

export default {
  // transition: 'slider',
  components: {
    card,
    navbar,
    navbarItem,
    cardRight,
  },
  data() {
    return {
      offset,
      isLoading: false,
      asideShow: false,
      active: -1,
      quantity: 1,
      cartNum: 0,
    }
  },
  computed: {
    user() {
      // console.log('authUser', this.$store.state.authUser)
      return this.$store.state.authUser
    },
    points() {
      if (!this.user || !this.user.user) return 0
      return this.user.user.points
    },
    userId() {
      if (!this.user ||!this.user.user) return ''
      return this.user.user.id
    },
    headImageUrl() {
      if (!this.user || !this.user.userWx) return ''
      return this.user.userWx.headImageUrl
    }
  },
  async asyncData(ctx) {
    let pageNum = 1
    let finished = false

    const resp = await ctx.$post('/api/platform/product/productPage', {pageSize, pageNum})

    const commoditys = resp.data.list || []
    if (commoditys.length < pageSize) finished = true
    pageNum++
    return {
      pageNum,
      finished,
      commoditys
    }
  },
  beforeMount() {
    let config = {
      title: '雪顿云商',
      desc: '首创代言人模式云商平台',
      imgUrl: 'http://img.tukeshare.com/FpdCDuMOeVlfM8Q-0VZk4KGc4mnC'
    }
    this.wxShare(config, this.userId)
  },
  mounted() {
    // this.getCommodity()
    this.getCarts()
  },
  methods: {
    cardData(commodity) {
      const {mainImage: url, name: title, subtitle: desc, price, soldStock: sellCount} = commodity
      const data = { url, title, desc, price, sellCount }
      return data
    },
    getCarts() {
      this.$post('/api/platform/cart/cartPage', { userId: this.userId }).then(resp => {
        const _list = resp.data || []
        this.cartNum = _list.length
      })
    },
    onClickLeft() {
      Toast('返回');
    },
    getCommodity() {
      return this.$post('/api/platform/product/productPage', {pageSize, pageNum: this.pageNum})
    },
    async onLoad() {
      this.isLoading = true
      const resp = await this.getCommodity()
      this.isLoading = false
      const _list = resp.data.list || []
      if (_list.length < pageSize) this.finished = true
      this.commoditys = [...this.commoditys, ..._list]
      this.pageNum++
    },
    // buy() {
    //   const { name: productName, price: currentUnitPrice, mainImage: productImage, subtitle: title, id: productId } = this.commodity || {}
    //   const order = {
    //     productId,
    //     productName, // 商品名 
    //     title,
    //     currentUnitPrice, // 生成订单时的商品单价，单位是元,保留两位小数
    //     userId: this.userId,
    //     quantity: this.quantity, // 商品数量
    //     productImage,
    //     totalPrice: this.quantity * currentUnitPrice, // 商品总价
    //   }
    //   saveorder([order])

    //   this.$router.push('/buy')
    // },
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import "~assets/stylus/variable.styl"

section
  padding-bottom 5rem
  background-color rgb(248,249,250)!important
.header
  position relative
  &::before
    content ''
    position absolute
    top 0
    left 0
    right 0
    height 2.5rem
    background-image: linear-gradient(to right, #febf01 5%,#0149a0 5%,#0149a0 9%,#ffffff 10%,#ffffff 10%,#ffffff 15%,#0149a0 16%,#0149a0 16%,#0149a0 22%,#0149a0 22%,#0294c9 22%,#0294c9 23%,#0294c9 23%,#0294c9 27%,#0294c9 27%,#fcfcfc 28%,#fcfcfc 33%,#f90707 34%,#f90707 34%,#f90707 39%,#febf01 40%,#febf01 46%,#0149a0 47%,#0149a0 47%,#0149a0 53%,#f90707 54%,#f90707 62%,#fcfcfc 63%,#fcfcfc 67%,#0149a0 68%,#0149a0 76%,#0294c9 77%,#0294c9 84%,#fcfcfc 85%,#fcfcfc 90%,#febf01 91%,#febf01 96%,#0149a0 97%);
    background-size 50% 100%
.aside
  min-width 50vw
  height 100vh
  white-space nowrap
  &-title
    padding 5rem 1rem
    display flex
    align-items center
    background-color $color-main
    .username
      margin-left 1rem
      color $color-white
.van-nav-bar
  background-color transparent!important
.van-list
  padding-bottom 1rem
// .van-tabbar
//   background-color rgb(248,249,250)!important
.user
  padding 1rem 0
  margin 0 1rem
  display flex
  align-items center
  &-info
    margin-left 1rem
    line-height 1.5
    color #fff
    .username
      font-size $fsz-large
    .van-icon
      margin-left 0.5rem
      background-color $color-black
      border-radius 50%
.btn-detail, .btn-buy
  margin-left 1rem
.kuaidi
  display block
  text-align center
  line-height 3
</style>
